<template>
    <div class="file-icon w-full h-full flex items-center justify-center" @mouseenter="handleMouseEnter">
        <img v-if="file.isDir" :src="'./file-icons/folder.svg'" alt="" />
        <Tippy class="w-full h-full" v-else-if="isImage" :delay="[300, 0]" :interactive="!isDragging" :append-to="body">
            <div class="w-full h-full">
                <img class="w-full h-full object-contain" :src="imageUrl" alt="" />
            </div>
            <template #content>
                <div class="tool-tip-content code-font bg-white p-2 rounded shadow-lg">
                    <div class="tooltip-image-preview transparent-background mx-auto rounded p-2 w-[250px] h-[250px] shadow-md">
                        <img :src="imageUrl" alt="" class="w-full h-full object-contain rounded" />
                    </div>
                    <div class="info">
                        <div class="break-all">名称：{{ file.name }}</div>
                        <div>width: {{ size.width }}px;</div>
                        <div>height: {{ size.height }}px;</div>
                    </div>
                </div>
            </template>
        </Tippy>
        <img v-else :src="iconUrl" alt="" />
    </div>
</template>

<script setup lang="ts">
import { IFileItem } from '@/appUtils/fs'
import { mouse } from '@/utils/keyboardAndMouse'
import { reactive, ref } from 'vue'
import { Tippy } from 'vue-tippy'
import fileExtensions from './fileExtensions.json'

const { file } = defineProps<{
    file: IFileItem
}>()


const isImage = fileExtensions[file.ext as keyof typeof fileExtensions] === 'image'
const iconUrl = `./file-icons/${fileExtensions[file.ext as keyof typeof fileExtensions]}.svg`
const imageUrl = ref(`file://${file.path}?t=${Date.now()}`)

// 鼠标拖拽中
const isDragging = ref(mouse.isDragging)

// 鼠标进入
const handleMouseEnter = () => {
    imageUrl.value = `file://${file.path}?t=${Date.now()}`
    getImageSize(imageUrl.value)
    isDragging.value = mouse.isDragging
}

// body dom
const body = () => document.body

// 尺寸
const size = reactive({
    width: 0,
    height: 0
})

// 获得图片尺寸
const getImageSize = async (src: string) => {
    const image = new Image()
    image.src = src
    await image.decode()
    size.width = image.width
    size.height = image.height
}
</script>

<style scoped>
.file-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tool-tip-content {
    box-shadow: var(--el-box-shadow-light);
 }
</style>

<style>
/* .tooltip-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
} */

</style>
